<template>
  <div class="report-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>评论举报管理</span>
          <div class="header-right">
            <el-select v-model="searchForm.status" placeholder="处理状态" clearable @change="handleSearch">
              <el-option label="待处理" :value="0" />
              <el-option label="已处理" :value="1" />
            </el-select>
          </div>
        </div>
      </template>

      <!-- 举报列表 -->
      <el-table
        v-loading="loading"
        :data="reportList"
        style="width: 100%"
      >
        <el-table-column prop="id" label="举报ID" width="80" />
        <el-table-column prop="commentContent" label="评论内容" min-width="200" show-overflow-tooltip />
        <el-table-column label="举报用户" width="150">
          <template #default="{ row }">
            <div class="user-info">
              <span>{{ row.userNickname }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="举报类型" width="120">
          <template #default="{ row }">
            <el-tag :type="getReportTypeTag(row.reportType)">
              {{ getReportTypeText(row.reportType) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="reason" label="举报原因" min-width="150" show-overflow-tooltip />
        <el-table-column label="处理状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.status === 0 ? 'warning' : 'success'">
              {{ row.status === 0 ? '待处理' : '已处理' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="处理结果" width="120">
          <template #default="{ row }">
            <el-tag v-if="row.status === 1" :type="getHandleResultTag(row.handleResult)">
              {{ getHandleResultText(row.handleResult) }}
            </el-tag>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="举报时间" width="180">
          <template #default="{ row }">
            {{ formatDateTime(row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button-group>
              <el-button
                type="primary"
                link
                @click="handleReport(row)"
                :disabled="row.status === 1"
              >处理</el-button>
              <el-button
                type="primary"
                link
                @click="viewDetail(row)"
              >详情</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 处理举报对话框 -->
    <el-dialog
      v-model="handleDialogVisible"
      title="处理举报"
      width="500px"
    >
      <el-form
        ref="handleFormRef"
        :model="handleForm"
        :rules="handleRules"
        label-width="100px"
      >
        <el-form-item label="处理结果" prop="handleResult">
          <el-radio-group v-model="handleForm.handleResult">
            <el-radio :label="1">忽略</el-radio>
            <el-radio :label="2">删除评论</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="处理备注" prop="handleRemark">
          <el-input
            v-model="handleForm.handleRemark"
            type="textarea"
            :rows="3"
            placeholder="请输入处理备注"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitHandle" :loading="submitting">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="举报详情"
      width="600px"
    >
      <el-descriptions :column="2" border>
        <el-descriptions-item label="举报ID" :span="2">{{ currentDetail.id }}</el-descriptions-item>
        <el-descriptions-item label="评论ID" :span="2">{{ currentDetail.commentId }}</el-descriptions-item>
        <el-descriptions-item label="评论内容" :span="2">{{ currentDetail.commentContent }}</el-descriptions-item>
        <el-descriptions-item label="举报用户">{{ currentDetail.userNickname }}</el-descriptions-item>
        <el-descriptions-item label="举报类型">
          {{ getReportTypeText(currentDetail.reportType) }}
        </el-descriptions-item>
        <el-descriptions-item label="举报原因" :span="2">{{ currentDetail.reason }}</el-descriptions-item>
        <el-descriptions-item label="处理状态">
          {{ currentDetail.status === 0 ? '待处理' : '已处理' }}
        </el-descriptions-item>
        <el-descriptions-item label="处理结果" v-if="currentDetail.status === 1">
          {{ getHandleResultText(currentDetail.handleResult) }}
        </el-descriptions-item>
        <el-descriptions-item label="处理备注" :span="2" v-if="currentDetail.handleRemark">
          {{ currentDetail.handleRemark }}
        </el-descriptions-item>
        <el-descriptions-item label="处理时间" :span="2" v-if="currentDetail.handleTime">
          {{ formatDateTime(currentDetail.handleTime) }}
        </el-descriptions-item>
        <el-descriptions-item label="举报时间" :span="2">
          {{ formatDateTime(currentDetail.createTime) }}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getCommentReports, handleCommentReport } from '@/api/admin'

// 状态定义
const loading = ref(false)
const submitting = ref(false)
const reportList = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 搜索表单
const searchForm = reactive({
  status: ''
})

// 对话框相关
const handleDialogVisible = ref(false)
const detailDialogVisible = ref(false)
const handleFormRef = ref(null)
const currentDetail = ref({})

// 处理表单
const handleForm = ref({
  reportId: null,
  handleResult: 1,
  handleRemark: ''
})

// 表单校验规则
const handleRules = {
  handleResult: [
    { required: true, message: '请选择处理结果', trigger: 'change' }
  ],
  handleRemark: [
    { required: true, message: '请输入处理备注', trigger: 'blur' },
    { min: 2, max: 200, message: '长度在 2 到 200 个字符', trigger: 'blur' }
  ]
}

// 获取举报列表
const fetchReports = async () => {
  try {
    loading.value = true
    const res = await getCommentReports({
      pageNum: currentPage.value,
      pageSize: pageSize.value,
      status: searchForm.status
    })
    
    if (res?.code === 200) {
      reportList.value = res.data.records
      total.value = res.data.total
    } else {
      ElMessage.warning(res?.message || '获取举报列表失败')
    }
  } catch (error) {
    console.error('获取举报列表失败:', error)
    ElMessage.error('获取举报列表失败')
  } finally {
    loading.value = false
  }
}

// 处理举报
const handleReport = (row) => {
  handleForm.value = {
    reportId: row.id,
    handleResult: 1,
    handleRemark: ''
  }
  handleDialogVisible.value = true
}

// 查看详情
const viewDetail = (row) => {
  currentDetail.value = row
  detailDialogVisible.value = true
}

// 提交处理
const submitHandle = async () => {
  if (!handleFormRef.value) return
  
  try {
    await handleFormRef.value.validate()
    submitting.value = true
    
    const res = await handleCommentReport({
      reportId: handleForm.value.reportId,
      handleResult: handleForm.value.handleResult,
      handleRemark: handleForm.value.handleRemark
    })
    
    if (res?.code === 200) {
      ElMessage.success('处理成功')
      handleDialogVisible.value = false
      fetchReports()
    } else {
      ElMessage.error(res?.message || '处理失败')
    }
  } catch (error) {
    console.error('处理失败:', error)
    ElMessage.error('处理失败：' + (error.message || '未知错误'))
  } finally {
    submitting.value = false
  }
}

// 搜索
const handleSearch = () => {
  currentPage.value = 1
  fetchReports()
}

// 分页相关
const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
  fetchReports()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  fetchReports()
}

// 获取举报类型标签
const getReportTypeTag = (type) => {
  const tags = {
    1: 'danger',
    2: 'warning',
    3: 'error',
    4: 'info',
    5: ''
  }
  return tags[type] || ''
}

// 获取举报类型文本
const getReportTypeText = (type) => {
  const texts = {
    1: '垃圾广告',
    2: '色情低俗',
    3: '政治敏感',
    4: '违法信息',
    5: '其他'
  }
  return texts[type] || type
}

// 获取处理结果标签
const getHandleResultTag = (result) => {
  const tags = {
    1: 'info',
    2: 'danger'
  }
  return tags[result] || ''
}

// 获取处理结果文本
const getHandleResultText = (result) => {
  const texts = {
    1: '忽略',
    2: '删除评论'
  }
  return texts[result] || result
}

// 格式化日期时间
const formatDateTime = (dateTime) => {
  if (!dateTime) return '暂无'
  if (Array.isArray(dateTime)) {
    const [year, month, day, hour, minute, second] = dateTime
    return `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')} ${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}:${String(second).padStart(2, '0')}`
  }
  const date = new Date(dateTime)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  })
}

// 初始化
fetchReports()
</script>

<style scoped>
.report-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-right {
  display: flex;
  gap: 10px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

:deep(.el-select) {
  width: 120px;
}

:deep(.el-descriptions) {
  padding: 20px;
}

:deep(.el-descriptions__cell) {
  padding: 12px;
}
</style> 